<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Coupons</title>

    <!--<link href="https://fonts.googleapis.com/css?family=PT+Serif|Open+Sans" rel="stylesheet">-->
    <!--<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
    <link href="styles/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="scss/utils/Main.css">
    <link rel="stylesheet" href="scss/utils/Admin.css">

</head>
<body class="has-admin-nav has-admin-aside has-admin-footer">
<main role="main">
    <section class="admin-navbar">
        <div class="container">
            <ul class="nav nav-pills" role="tablist">
                <li role="presentation"><a href="AdminIndex.html">Campaigns</a></li>
                <li role="presentation"><a href="AdminStats.html">Stats</a></li>
                <li role="presentation"><a href="AdminStores.html">Stores</a></li>
                <li role="presentation"><a href="AdminProfits.html">Profits</a></li>
                <li role="presentation"><a href="AdminSettings.html">Settings</a></li>
                <li role="presentation"><a href="AdminSubaccounts.html">Subaccounts</a></li>
                <li role="presentation" class="active"><a href="AdminCoupons.html">Coupons</a></li>
            </ul>
        </div>
    </section>

    <section class="admin-content admin-content-header">
        <div class="container">
            <div class="box">
                <h2 class="PTSerif">Coupons</h2>
                <!--<h3>Figures based on June 13, 2017 at 10:33 AM GMT+08:00</h3>-->
                <div class="content-header-aside"><a href="#" class="color-pink font-rem-1-6" data-toggle="modal" data-target=".admin-modal-add" data-backdrop="static"><u>+ Add coupon</u></a></div>
            </div>
        </div>
    </section>
    <section class="admin-content">
        <div class="container">
            <p class="text-info box" style="padding: 20px;margin-bottom: 0;">Coupons allow you to offer special incentives to your customers. After creating a coupon, simply append it to the end of a campaign url (https://teechip.com/your_campaign?cp=COUPONCODE). Redeemed coupons are subtracted from the profit on the targeted campaign. If a campaign does not have enough profit to cover the coupon, the coupon is not applied.</p>
        </div>
    </section>

    <section class="admin-content">
        <div class="container">
            <div class="box section-h3">Total: <strong>2</strong></div>
        </div>
    </section>

    <section class="admin-content section-table">
        <div class="container">
            <div class="box">
                <!--No campaigns found 没有结果时显示的内容-->
                <!--<div class="font-rem-2-4 text-center no_found">No campaigns found</div>-->
                <div class="table-wrapper table-responsive">
                    <table class="table" id="table"></table>
                </div>
            </div>
        </div>
    </section>

</main>

<div class="modal fade admin-modal-add" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close btn-clean" data-dismiss="modal" aria-label="Close"><i class="fa fa-times font-rem-1-8"  aria-hidden="true"></i></button>
                <h4 class="modal-title PTSerif">Add Coupon</h4>
            </div>
            <div class="modal-body modal-body-padding">
                <form action="" class="form-radius" id="form_add" method="get">
                    <div class="form-group">
                        <div class="row">
                            <label class="col-xs-5 control-label">Coupon code</label>
                            <div class="col-xs-7">
                                <input type="text" class="form-control" name="coupon_code">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="col-xs-5 control-label">Type</label>
                            <div class="col-xs-7 pr">
                                <select name="type" class="form-control">
                                    <option value="0">Free shipping(US only)</option>
                                    <option value="1">Discount</option>
                                </select>
                                <i class="fa fa-caret-down select-caret"></i>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="col-xs-5 control-label">Amount</label>
                            <div class="col-xs-7">
                                <input type="text" class="form-control" placeholder="Amount" name="amount">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="col-xs-5 control-label">Expiration</label>
                            <div class="col-xs-7">
                                <div class="has-addon">
                                    <input type="text" class="form-control table-cell" name="expiration" id="expiration">
                                    <i class="fa fa-calendar input-group-addon"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="col-xs-5 control-label">Add restrictions</label>
                            <div class="col-xs-7">
                                <input type="text" class="form-control" name="add_restrictions" placeholder="Type to begin search">
                            </div>
                        </div>
                    </div>
                    <div class="text-center">
                        <button type="submit" class="control-btn btn btn-fill-primary PTSerif btn-animate-fade" style="margin-top:30px ;margin-bottom:30px;">Add coupon</button>
                    </div>
                </form>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade admin-modal-edit" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close btn-clean" data-dismiss="modal" aria-label="Close"><i class="fa fa-times font-rem-1-8"  aria-hidden="true"></i></button>
                <h4 class="modal-title PTSerif">Edit Coupon</h4>
            </div>
            <div class="modal-body modal-body-padding">
                <form action="" class="form-radius" id="form_edit" method="get">
                    <div class="form-group">
                        <div class="row">
                            <label class="col-xs-5 control-label">Edit restrictions&nbsp;<a href="javascript:void(0);" data-container="body" data-toggle="popover" data-placement="top" data-content="Restrict coupon to selected campaigns"><span class="icon-help">?</span></a></label>
                            <div class="col-xs-7">
                                <input type="text" class="form-control" name="edit_restrictions">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="col-xs-5 control-label">Active</label>
                            <div class="col-xs-7 controls">
                                <div class="bootstrap-switch PTSerif" tabindex="0" >
                                    <input type="checkbox" data-control-mode="switch" class="ignore_validate"/>
                                    <input type="hidden" name="active">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="">
                        <button type="submit" class="control-btn btn btn-fill-primary PTSerif btn-animate-fade" style="margin-top: 25px;margin-bottom:35px;">Save</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade admin-modal-del" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close btn-clean" data-dismiss="modal" aria-label="Close"><i class="fa fa-times font-rem-1-8"  aria-hidden="true"></i></button>
                <h4 class="modal-title PTSerif">Remove Coupon</h4>
            </div>
            <div class="modal-body text-center">
                <button type="button" class="control-btn btn btn-fill-default PTSerif btn-animate-fade btn-remove" data-dismiss="modal">Remove</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="lib/jquery.1.12.4.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/bootstrap-table.min.js"></script>
<script src="lib/jquery-ui-1.10.3.min.js"></script>
<script src="lib/jquery.validate.min.js"></script>
<script src="scripts/index.js"></script>
<script>
    //@ sourceURL = test.js
    $(function($){

        $("#table").bootstrapTable({
            url:"json/AdminCoupons.json",
            cache:false,
            method:"post",
            columns:[{
                field:"id",
                title:"ID",
                visible:false
            },{
                field:"created",
                title:"Created",
                formatter:dateMonthFormatter

            },{
                field:"type",
                title:"Type"
            },{
                field:"coupon_code",
                title:"Coupon code"
            },{
                field:"amount",
                title:"Amount",
                formatter:priceFormatter
            },{
                field:"conversions",
                title:"Conversions"
            },{
                field:"active",
                title:"Active",
                formatter:activeBoolFormatter
            },{
                field:"expiration",
                title:"Expiration"
            },{
                title:"",
                formatter:EandDFormatter,
                events:operateEvents
            }]
        });
        $("#expiration").datepicker(defaults.datepicker);

        //删除表格行
        $(".admin-modal-del").on("click",".btn-remove",function(){
            var ids = $(this).attr("data-id"); //string
            $("#table").bootstrapTable('remove', {
                field: 'id',
                values: [ids]
            });
        });

        //modal edit
        $(".admin-modal-edit")
            .on("show.bs.modal",function(){
                setSwitchForRequest({"url":"#","data":123});
            })
            .on("shown.bs.modal",function(){
                validatorForm({
                    container:this,
                    callback:function(params){
                        console.log(params);
                        validator.resetForm();
                    }
                });
            })
            .on("hide.bs.modal",resetFormValidate);

         //modal add
         $(".admin-modal-add")
             .on("shown.bs.modal",function(){
                 validatorForm({
                     container:this,
                     rules:{
                         'coupon_code':{
                             required:true
                         },
                         type:{
                             required:true
                         },
                         amount:{
                             required:true
                         },
                         expiration:{
                             required:true
                         }
                     },
                     callback:function(params){
                         console.log(params);
                         validator.resetForm();
                     }
                 });
             })
             .on("hide.bs.modal",resetFormValidate);
    });
</script>
</body>
</html>